<template>
    <div><el-button plain @click="dialogVisible = true">
   Click to open the Dialog
 </el-button>
   <el-dialog
     v-model="dialogVisible"
     title="解答助手"
     width="800"
     :before-close="handleClose"
   >
   <div style="height: 500px;" v-loading="loading">
     <div style="height: 100%;overflow-y: scroll"> 
      <div v-for="v in list">
       <div class="item1" v-if="v.type==1">
           <div class="left">
             <img src="https://img.huopu.com/p/202305/20230523151095.png" alt="">
           </div>
           <div class="right">
             <div>{{ getTimee(v.time) }}</div>
             <div v-html="v.msg"></div>
           </div>
       </div>
       <div class="item2" v-else>
           <div class="right">
             <div>{{ getTimee(v.time) }}</div>
             <div >{{ v.msg }}</div>
           </div>
           <div class="left">
             <img src="https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399" alt="">
           </div>
       </div>
      </div>
   </div>
   </div>
   <div style="display: flex;">
       <el-input v-model="content" placeholder="请输入问题" @keyup.enter="send"></el-input>
       <el-button type="primary" style="margin-left:20px" @click="send">发送</el-button>
   </div>
   </el-dialog></div>
 </template>
 
 <script  setup>
 import axios from '~/axios'
 import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
 const loading = ref(false)
 const dialogVisible = ref(false)
 const content=ref("")
 const list=ref([{
   type:1,
   time:new Date().getTime(),
   msg:'hello，我是ai助手，欢迎交流提问哦～'
 }])
 function getTimee(time){
   console.log(time)
   let t=new Date(time)
   let nian=t.getFullYear()
   let yue=t.getMonth()+1
   let ri=t.getDate()
   let shi=t.getHours()
   let fen=t.getMinutes()
   let miao=t.getSeconds()
   return `${nian}/${yue}/${ri} ${shi<10?'0'+shi:shi}:${fen<10?'0'+fen:fen}:${miao<10?'0'+miao:miao}`
 }
 function send(){
   list.value.push({
     type:2,
     time:new Date().getTime(),
     msg:content.value
   })
   let text= content.value
   content.value=''
   loading.value=true
   axios({
   url:'https://api.binjie.fun/api/generateStream?refer__1360=n4%2Bx9DcDBDgn0%3DQD%3DD%2FD0ioNoiKpa2Bx7KKdwQx',
   method: 'post',
   data:{
       network:true,
       userId:'#/chat/1741138368085',
       stream:false,
       prompt:text
   }
 }).then(res=>{
   list.value.push({
     type:1,
     time:new Date().getTime(),
     msg:res.replace(/```([\s\S]*?)```/g, '<div style="background-color: white;padding:10px;margin:10px 0">\$1</div>')
   })
   loading.value=false
   console.log(res)
 })
 }


 </script>
<style scoped >
.item1,.item2{
   display: flex;
   margin-bottom: 20px;
   
 }
 .item2{
   justify-content: flex-end;
 }
 .item2 .left{
   margin-left:10px;
   flex-shrink: 0;
 }
 .item2 .left img{
   border-radius: 50%;
   width: 40px;
   height: 40px;
   } 
 .item1 .left{
   margin-right:10px;
   flex-shrink: 0;

 }
 .item1 .right>div:nth-child(2){
   margin-right: 25px;
   padding: 10px;
background-color: rgb(244,246,248);
border-radius: 6px;
 }
 .item1 .left img{
   border-radius: 50%;
   width: 40px;
   height: 40px;
   } 
   .item2 .right>div:nth-child(1){
     text-align: right;
   }
   .item2 .right{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
   }
   .item2 .right>div:nth-child(2){
     
   padding: 10px;
   margin-left: 25px;
background-color: rgb(210,249,209);
border-radius: 6px;
color: black;
 }
</style>